---
import Header from "../components/Header.astro"
import Layout from "../layouts/Layout.astro"
import Icon from "../lib/Icon.astro"
---

<Layout>
    <Fragment slot="seo">
        <meta name="description" content="Фронтенд разработчик" />
    </Fragment>
    <div class="header">
        <Header>
            <a slot="back" href="/portfolio">Портфолио</a>
        </Header>
    </div>
    <main class="index__main">
        <h1 class="title">eloh1m</h1>
        <div class="links">
            <a
                href="https://github.com/vladislav-atakhanov"
                title="Мой аккаунт Github"
                class="link link--github"
            >
                <Icon name="github" />
            </a>
            <a
                href="https://t.me/eloh1m"
                title="Написать мне в Telegram"
                class="link link--telegram"
            >
                <Icon name="telegram" />
            </a>
            <a
                href="https://notabug.org/vladislav-atakhanov"
                title="Мой аккаунт NotABug"
                class="link link--notabug"
            >
                <Icon name="notabug" />
            </a>
        </div>
        <a href="mailto:eloh1mZee@gmail.com" class="email" target="_blank"
            >email: <u>eloh1mZee@gmail.com</u></a
        >
    </main>
</Layout>

<style>
    body {
        margin: 0;
        font-size: calc(16px + 6 * ((100vw - 320px) / (1280 - 320)));
        position: relative;
    }
    @media (prefers-color-scheme: light) {
        body {
            color: #333;
            --color: hsl(50deg, 75%, 50%);
        }
    }
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #333;
            color: #fff;
            --color: lightblue;
        }
    }
    .header {
        position: absolute;
        width: 100%;
    }

    a {
        display: block;
        text-decoration: none;
        color: inherit;
    }
    .links {
        display: flex;
        gap: clamp(1.5em, 5vw, 3em);
    }
    h1 {
        font-size: 4em;
        margin: 0;
        display: flex;
        align-items: baseline;
    }
    .link {
        height: 5em;
        transition: 0.3s ease;
        &:hover {
            transform: scale(1.1);
        }
        :global(svg) {
            display: block;
            width: 100%;
            height: 100%;
            aspect-ratio: 1 / 1;
        }
    }
    .index__main {
        display: flex;
        height: 100vh;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 1em;
    }
    .email {
        margin-top: 1em;
    }
</style>
